<template>
  <div class="lin-container">
    <div class="title2">
      <span>查看出库详情</span> <span class="back" @click="back"> <i class="iconfont icon-fanhui"></i> 返回 </span>
    </div>
    <div class="lin-wrap-ui">
      <el-card  class="box-card" style="margin-bottom:50px;padding-bottom: 50px">
        <div slot="header">
          <el-row>
            <el-col :span="12">
              <span>出库单审核</span>
            </el-col>
            <!--            <el-col :span="12">-->
            <!--              <span>销售单</span>-->
            <!--            </el-col>-->
          </el-row>

        </div>
        <el-row>
          <el-col :span="11" style="margin-left:20px;margin-right:20px;margin-top:20px;margin-bottom:20px;">
            <el-input placeholder="请输入内容" size="medium" v-model="form.username" disabled>
              <template slot="prepend"
              >处理人</template
              >
            </el-input>
          </el-col>
          <!--        </el-row>-->
          <!--        <el-row style="margin-top:20px;margin-bottom:20px;">-->
          <el-col :span="11" style="margin-left:20px;margin-right:20px;margin-top:20px;margin-bottom:20px;">
            <el-input placeholder="请输入内容" size="medium" v-model="applyList.username" disabled>>
              <template slot="prepend"
              >申请人</template
              >
            </el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11" style="margin-left:20px;margin-right:20px;margin-top:20px;margin-bottom:20px;">
            <el-input placeholder="请输入内容" size="medium" v-model="applyList.create_time" disabled>
              <template slot="prepend"
              >申请时间</template
              >
            </el-input>
          </el-col>
          <!--        </el-row>-->
          <!--        <el-row style="margin-top:20px;margin-bottom:20px;">-->
          <el-col :span="11" style="margin-left:20px;margin-right:20px;margin-top:20px;margin-bottom:20px;">
            <el-input placeholder="请输入内容" size="medium" v-model="applyList.shop_name" disabled>>
              <template slot="prepend"
              >申请店铺</template
              >
            </el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11" style="margin-left:20px;margin-right:20px;margin-top:20px;margin-bottom:20px;">
            <el-input placeholder="请输入内容" size="medium" v-model="applyList.replenish_id" disabled>
              <template slot="prepend"
              >补货单号</template
              >
            </el-input>
          </el-col>
          <!--        </el-row>-->
          <!--        <el-row style="margin-top:20px;margin-bottom:20px;">-->
          <el-col :span="11" style="margin-left:20px;margin-right:20px;margin-top:20px;margin-bottom:20px;">
            <el-input placeholder="请输入内容" size="medium" v-model="applyList.output_id" disabled>
              <template slot="prepend"
              >出库单号</template
              >
            </el-input>
          </el-col>
        </el-row>
<!--        <el-row>-->
<!--          <el-col :span="11" style="margin-left:20px;margin-right:20px;margin-top:20px;margin-bottom:20px;">-->
<!--            <el-input placeholder="请输入内容" size="medium" v-model="applyList.replenish_create_time" disabled>-->
<!--              <template slot="prepend"-->
<!--              >补货单号</template-->
<!--              >-->
<!--            </el-input>-->
<!--          </el-col>-->
<!--          &lt;!&ndash;        </el-row>&ndash;&gt;-->
<!--          &lt;!&ndash;        <el-row style="margin-top:20px;margin-bottom:20px;">&ndash;&gt;-->
<!--          <el-col :span="11" style="margin-left:20px;margin-right:20px;margin-top:20px;margin-bottom:20px;">-->
<!--            <el-input placeholder="请输入内容" size="medium" v-model="applyList.replenish_create_time" disabled>-->
<!--              <template slot="prepend"-->
<!--              >补货单号</template-->
<!--              >-->
<!--            </el-input>-->
<!--          </el-col>-->
<!--        </el-row>-->
        <el-collapse>

        </el-collapse>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="goods_name" label="商品名" width="350"></el-table-column>
          <el-table-column prop="goods_price" label="单价" width="350"></el-table-column>
          <el-table-column prop="quantity" label="出库数量" width="350" >
            <!--            <template slot-scope="props">-->
            <!--              <el-input  placeholder="请输入内容" size="mini"  v-model="props.row.number"  />-->
            <!--            </template>-->
          </el-table-column>
          <!--          <el-table-column  prop="city" label="总价" width="200"></el-table-column>-->
          <!--          <el-table-column label="操作" width="150" fixed="right">-->
          <!--            <template slot-scope="scope">-->
          <!--              <el-button type="danger" size="mini" plain @click="handleDelete(scope)">删除</el-button>-->
          <!--            </template>-->

          <!--          </el-table-column>-->
        </el-table>


        <el-row v-if="applyList.status=='已出库，待分配送货员'&&applyList.editable"    style="margin-left:20px;margin-right:20px;margin-top:20px;margin-bottom:20px;">
            <div align="center">
              <el-button @click="handleSubmit()"  type="success" style="margin-left:20px;margin-right:20px;">通过</el-button>
              <el-button @click="handleReject()" type="danger" style="margin-left:20px;margin-right:20px;">驳回</el-button>
              <el-button @click="handleSubmit()" type="primary" style="margin-left:20px;margin-right:20px;">关联补货单</el-button>
            </div>
        </el-row>


        <!--                  <el-collapse-item title="查看代码" name="2">-->
        <!--                    <div style="white-space: pre-wrap;">{{ complex }}</div>-->
        <!--                  </el-collapse-item>-->
      </el-card>
    </div>
  </div>
</template>

<script>
import replenishList from '@/model/shopList'
import outputList from '@/model/outputList'
import Vue from 'vue'

export default {
  props: {

    applyList: {
      type: Object
    }
  },
  components: {
  },
  name: 'shop-sale',
  data() {
    return {
      num: 1,
      showAdd: false,
      input: '',
      form: {
        id: '',
        username: '',
        shop_name: '',
        list: [],
      },
      tableData: [],
    }
  },
  methods: {


    back() {
      this.$emit('back')
      // this.getBooks()
    },
    handleReject() {
      // this.$confirm('是否驳回补货单?', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning',
      // }).then(async () => {
      //   const res = await replenishList.rejectReplenishApply(this.applyList.replenish_id)
      //   if (res.code < window.MAX_SUCCESS_CODE) {
      //     this.$message.success(`${res.message}`)
      //     this.$emit('back')
      //   }
      // })
    },
    handleSubmit() {
      this.form.shop_list_details = this.tableData
      console.log(this.form)
      this.$confirm('是否通过并生成送货单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
      }).then(async () => {
        const res = await outputList.passOutputApply(this.applyList.output_id, this.form.id)
        if (res.code < window.MAX_SUCCESS_CODE) {
          this.$message.success(`${res.message}`)
          this.$emit('back')
        }
      })
    }
  },
  created() {
    const { user } = this.$store.state
    console.log(user)
    this.form.id = user && user.id ? user.id : 999
    this.form.username = user.username
  },

  async mounted() {
    console.log('mounted')
    const res = await outputList.getOutputDetails(this.applyList.output_id)
    this.tableData = res
    console.log(this.tableData)
  }

}
</script>

<style lang="scss" scoped>
@import 'src/plugin/lin-cms-ui/assets/style/container.scss';

.input-with-select /deep/ .el-input-group__prepend {
  background-color: #fff;
  width: 100px;
  border-top: 1px solid #dcdfe6;
  border-left: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  border-right: none;
}

.container {
  padding: 0 30px;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      height: 59px;
      line-height: 59px;
      color: $parent-title-color;
      font-size: 16px;
      font-weight: 500;
    }
  }

  .title2 {
    height: 59px;
    line-height: 59px;
    color: $parent-title-color;
    font-size: 16px;
    font-weight: 500;
    text-indent: 40px;

    .back {
      float: right;
      margin-right: 40px;
      cursor: pointer;
    }
  }

  .pagination {
    display: flex;
    justify-content: flex-end;
    margin: 20px;
  }
}

</style>
